<!DOCTYPE html>
<!-- Tutorial series by David Rousset: http://blogs.msdn.com/davrous -->
<!-- Based on this EaselJS sample: http://easeljs.com/examples/bitmapAnimation.html -->
<html>

<head>
    <title>gamefwkBox2DWeb</title>

    <!-- Import EaselJS Framework -->
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/easeljs-0.6.0.min.js"></script>
    <script src="js/gamefwk/util/ImgLoader.js"></script>
    <script src="js/gamefwk/Vector2.js"></script>
    <script src="js/gamefwk/Framework.js"></script>
    <script src="js/gamefwk/Color.js"></script>
    <script src="js/gamefwk/Rectangle.js"></script>

    <script src="js/gamefwk/go/GameObject.js"></script>
    <script src="js/gamefwk/go/char/Mario.js"></script>
    <script src="js/gamefwk/go/char/Brick.js"></script>

    <script src="js/gamefwk/go/cont/Controller.js"></script>
    <script src="js/gamefwk/go/cont/SimpleController.js"></script>
    <script src="js/gamefwk/go/cont/Box2DController.js"></script>
    <script src="js/gamefwk/go/cont/MarioBox2DController.js"></script>

    <script src="js/Box2dWeb-2.1.a.3.min.js"></script>
    <script src="js/gamefwk/sys/box2d/Box2DSys.js"></script>
    <script src="js/gamefwk/go/upd/Updater.js"></script>
    <script src="js/gamefwk/go/upd/RectPosUpdater.js"></script>
    <script src="js/gamefwk/go/upd/Box2DPosUpdater.js"></script>

    <script>
    /*SISTEMA DE JUEGO------------------------------------------------------------------------------------------------------------------------------*/
    GameSys = {};

    var canvas;
    var screen_width;
    var screen_height;

    GameSys.fps = 60;
    GameSys.imagesToLoad = 2;

    GameSys.imgLoader = new ImgLoader(GameSys.imagesToLoad, startGame);
    GameSys.gameObjects = [];

    GameSys.debugBox2d = false;
    GameSys.tickCount = 0;
    GameSys.screenScale = 0.9;
    GameSys.width = getWidth() * GameSys.screenScale;
    GameSys.height = getHeight() * GameSys.screenScale;
    $(document).ready(init);

    function loadImages() {
            GameSys.imgLoader.load("img/mario.png", "mario");
            GameSys.imgLoader.load("img/brick.png", "brick");
        } //loadImages

    function initGameSys() {
            // create a new stage and point it at our canvas:
            GameSys.stage = new createjs.Stage(canvas);
            GameSys.gameContainer = new createjs.Container();

        } //initGameSys


    function initGameObjects() {
        var box2dsys = GameSys.box2dsys;

        /*inicializo el personaje de mario*/
        var mario = new Mario(0, 400, 16, 16, 8, 8, 1.5, 1.5);
        GameSys.mario = mario;
        GameSys.gameObjects.push(mario);
        var circleProperties = new DefaultProperties();
        circleProperties.restitution = 0;
        circleProperties.friction = 1.5;
        var mainCircle = box2dsys.createCircleFromGameObject(mario, circleProperties);
        var controller = new MarioBox2DController(GameSys.mario, mainCircle, box2dsys, 200);
        mario.addController(controller);

        var brick2 = new Brick(300, 500, 374, 374, 187, 187, 0.1, 0.1, "brick");
        GameSys.gameObjects.push(brick2);
        var absDim = brick2.getAbsDimensions();
        console.log(absDim);
        var brickProperties = new DefaultProperties();
        brickProperties.restitution = 0;
        brickProperties.type = b2Body.b2_staticBody;
         mainRect = box2dsys.createRectangle(box2dsys.ptm(brick2.x), box2dsys.ptm(brick2.y), box2dsys.ptm(absDim.w * 0.55), box2dsys.ptm(absDim.h * 0.55), brickProperties);
         mainRect.SetUserData("wall");
    }

    function initBox2DSys() {
        GameSys.drawScale = 10;
        GameSys.box2dsys = new Box2DSys(GameSys.drawScale, true, ctx);
        var box2dsys = GameSys.box2dsys;
        box2dsys.initBox2D();
        box2dsys.createGround();
    }

    function init() {
            //find canvas and load images, wait for last image to load
            canvas = document.getElementById("testCanvas");
            ctx = canvas.getContext("2d");
            setCanvasSize(GameSys.width, GameSys.height);

            initBox2DSys();

            initGameObjects();

            initGameSys();

            loadImages();

        } //init

    function loadAnimations() {
            for (var i = 0; i < GameSys.gameObjects.length; i++)
                GameSys.gameObjects[i].loadAnimations();
        } //loadAnimations

    function startGame() {
            loadAnimations();

            GameSys.stage.addChild(GameSys.gameContainer);
            for (var i = 0; i < GameSys.gameObjects.length; i++)
                GameSys.gameContainer.addChild(GameSys.gameObjects[i].animation);

            // we want to do some work before we update the canvas,
            // otherwise we could use Ticker.addListener(stage);
            createjs.Ticker.addListener(GameSys);
            createjs.Ticker.useRAF = true;
            // Best Framerate targeted (60 FPS)
            createjs.Ticker.setFPS(GameSys.fps);
        } //startGame


    GameSys.tick = function() {
        for (var i = 0; i < GameSys.gameObjects.length; i++)
            GameSys.gameObjects[i].tick();

        if (GameSys.debugBox2d) {
            GameSys.tickCount++;
            GameSys.tickCount = GameSys.tickCount % 1024;
            if (GameSys.tickCount % 6)
                GameSys.box2dsys.step();
            else
                GameSys.stage.update();
        } else {
            GameSys.box2dsys.step();
            GameSys.stage.update();
        }



        var hero = GameSys.mario;
        var world = GameSys.gameContainer;
        var w = GameSys.width;
        var h = GameSys.height;

        var wd=0.3;
        var hd=0.9;

        if (hero.x > w * wd) {
            world.x = -hero.x + w * wd;
        }
        if (hero.y > h * hd) {
            world.y = -hero.y + h * hd;
        } else if (hero.y < h * hd) {
            world.y = -hero.y + h * hd;
        }
    };
    //tick
    </script>
</head>

<body id="body">

    <canvas id="testCanvas" width="800" height="700" style="background-color:#607559">
        Your browser doesn't support canvas. Please download IE9+ on <a href="http://ie.microsoft.com/testdrive">IE Test Drive</a>
    </canvas>

</body>

</html>
